
<template>
  <a-modal
    :visible="visible"
    :cancelButtonProps="{ style: { display: 'none' } }"
    :afterClose="hanldeAfterClose"
    :dialogStyle="{ top: '120px' }"
    :width="1120"
    :zIndex="1001"
    @cancel="handleCancel"
    @ok="handleOk"
    title="查看房屋详情"
  >
    <a-tabs v-model="activeKey">
      <a-tab-pane :key="0" tab="房屋信息">
        <house v-if="tabClick[0]" :houseID="houseID"/>
      </a-tab-pane>
      <a-tab-pane :key="1" tab="租赁人信息">
        <proposer v-if="tabClick[1]" :houseID="houseID" />
      </a-tab-pane>
      <a-tab-pane :key="2" tab="合同信息">
        <contract v-if="tabClick[2]" :houseID="houseID" />
      </a-tab-pane>
      <a-tab-pane :key="3" tab="房屋分配情况">
        <distribute v-if="tabClick[3]" :houseID="houseID" />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
/**
 * Parser 房屋详情业务组件
 * @Author Answer™
 * @Version 1.0.0
 * @Date：2022-8-19 10:48:48
 * @LastEditors：Answer™
 * @LastEditTime：2022-8-29 11:44:25
 * @property visible  Boolean 显示、隐藏
 * @event
 */
import house from './house.vue'
import proposer from './proposer.vue'
import contract from './contract.vue'
import distribute from './distribute.vue'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    houseID: {
      type: [String, Number],
      default: ''
    }
  },
  components: {
    house,
    proposer,
    contract,
    distribute
  },
  watch: {
    activeKey (n, o) {
      if (n === 0) return
      this.tabClick[n] = true
    },
    visible (n) {
      if (n) {
        this.tabClick[0] = true
      }
    }
  },
  data () {
    return {
      activeKey: 0,
      // 是否加载
      tabClick: [false, false, false, false]
    }
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
      // 重置数据
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.close()
    },
    hanldeAfterClose () {}
  }
}
</script>
<style scoped>
</style>
